A Line chart with a static Y axis

A chart where the left Y axis is static and doesn't move when you scroll from left to right. Firefox doesn't support the required property on the event object so the tooltips are out of place in this browser. The scrolling effect works however.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.drawing.yaxis.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<div style="position: relative; width: 600px; height: 220px">
    <canvas id="axes" width="41" height="200" style="position: absolute; top: 5px; left: 0; z-index: 3"></canvas>
    <div style="width: 600px; overflow: auto; position: absolute; left: 41px">
        <canvas id="cvs" width="1000" height="200"></canvas>
    </div>
</div>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        // This is the code that produces the chart
        var line = new RGraph.Line({
            id: 'cvs',
            data: [4,6,8,5,9,6,4,8,4,6,15,2],
            options: {
                labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                tooltipsCoordsPage: true,
                noxaxis: true,
                noyaxis: true,
                ylabels: false,
                hmargin: 25,
                tickmarks: 'endcircle',
                gutterLeft: 0,
                textAccessible: true
            }
        }).draw();

        var yaxis = new RGraph.Drawing.YAxis({
            id: 'axes',
            x: 40,
            options: {
                max: line.max,
                colors: ['black'],
                textAccessible: true
            }
        }).draw();
    };
</script>